<template>
    <systemDialog :title="dailog.title" :width="dailog.width" :height="dailog.height" :visible="dailog.visible" @onClose="onClose" @onConfirm="confirm">
        <template v-slot:content>
           <el-form :model="dialogModel" ref="addDeptForm" :rules="rules" label-width="80px" :inline="false" size="small">
               <el-row>
                   <el-col :span="12">
                        <el-form-item prop="parentName" label="上级部门">
                            <el-input type="hidden" v-model="dialogModel.pid"></el-input>
                            <el-input v-model="dialogModel.parentName" @click="selectParent"></el-input>
                        </el-form-item>
                   </el-col>
                   <el-col :span="12">
                        <el-form-item prop="name" label="部门名称">
                            <el-input v-model="dialogModel.name"></el-input>
                        </el-form-item>
                   </el-col>
                   <el-col :span="12">
                        <el-form-item prop="deptCode" label="部门编码">
                            <el-input v-model="dialogModel.deptCode"></el-input>
                        </el-form-item>
                   </el-col>
                   <el-col :span="12">
                        <el-form-item prop="deptPhone" label="部门电话">
                            <el-input v-model="dialogModel.deptPhone"></el-input>
                        </el-form-item>
                   </el-col>
                   <el-col :span="12">
                        <el-form-item prop="manager" label="部门经理">
                            <el-input v-model="dialogModel.manager"></el-input>
                        </el-form-item>
                   </el-col>
                   <el-col :span="12">
                        <el-form-item prop="deptAddress" label="部门地址">
                            <el-input v-model="dialogModel.deptAddress"></el-input>
                        </el-form-item>
                   </el-col>
                   <el-col :span="12">
                        <el-form-item prop="orderNum" label="部门序号">
                            <el-input v-model="dialogModel.orderNum"></el-input>
                        </el-form-item>
                   </el-col>
               </el-row>
           </el-form>
        </template>
    </systemDialog>
    <!-- 上级部门弹窗 -->
    <parent ref="parentRef" @select="select"></parent>
</template>
<script setup lang='ts'>
import { ref,reactive} from 'vue'
import systemDialog from '@/components/systemDialog.vue';
import userDialog from '@/hooks/userDialog'
import { EditType, Title } from '@/type/BaseEnum'
import userBaseModel from '@/composables/department/userBaseModel';
import parent from './parent.vue';
import userSelectParent from '@/composables/department/userSelectParent'
import { DeptModel, SelectNode } from '@/api/dept/DeptModel';
import { ElForm } from 'element-plus';
import userInstance from '@/hooks/userInstance';
// 全局挂载
const { global } = userInstance()
// 基础属性
const { dialogModel, rules } = userBaseModel()
// 弹框属性
// const { dailog, onShow, onClose, onConfirm } = userDialog()
const { dailog, onClose, onShow } = userDialog()


// 表单的ref属性
const addDeptForm = ref<InstanceType<typeof ElForm>>()

// 声明事件
const emit = defineEmits(['save'])

// 弹框确定。把表单的值返回给父组件
const confirm = () => {
    addDeptForm.value?.validate(valid => {
        console.log(valid)
        if(valid) {
            emit('save',dialogModel)
            // 关闭弹窗
            onClose()
        }
    })
}

// 给父组件调用,显示弹窗
const show = (type: string, row?: DeptModel) => {
    // 设置弹框的宽度
    dailog.width = 550
    dailog.height = 200
    // 设置弹窗的标题
    type == EditType.ADD ? dailog.title = Title.ADD : dailog.title = Title.EDIT
    // 清空表单
    global.$restForm(addDeptForm.value,dialogModel)
    if(type === EditType.EDIT) {
        // 回显数据 把row复制到dialogModel
        global.$objCopy(row, dialogModel)
    }
    // 设置是编辑还是新增
    dialogModel.type = type
    // 显示弹窗
    onShow() 
}

// 在组件中，属性和方法,只能对当前template
// 外部需要使用的时候,需要使用 defineExpose 暴露出去
// 给父组件
defineExpose({
    show
})

// 上级部门 
// 点击触发<el-input v-model="dialogModel.parentName" @click="selectParent"></el-input>，设置dailog属性
const { parentRef, selectParent } = userSelectParent()
console.log(parentRef)


// 选中上级的数据
const select = (node:SelectNode) => {
    console.log('父组件取到值===', node)
    dialogModel.pid = node.id
    dialogModel.parentName = node.name
}
</script>
<style scoped lang='scss'>
</style>